<!-- 统一的用户端顶部栏组件 -->
<template id="header-template">
    <header class="header">
        <div class="wrap">
            <!-- 导航菜单 -->
            <nav class="main-nav">
                <div class="nav-container">
                    <div class="logo">
                        <a href="/">
                            <img id="siteLogo" src="/static/tp/Logo.png" alt="ubike" loading="lazy">
                        </a>
                    </div>

                    <ul class="nav-menu">
                        <li class="nav-item"><a href="/" class="nav-link">首页</a></li>
                        <li class="nav-item"><a href="/about" class="nav-link">关于我们</a></li>
                        <li class="nav-item">
                            <a href="#" class="nav-link" onclick="alert('特色服务页面正在开发中...')">特色服务 <i class="fas fa-chevron-down"></i></a>
                            <ul class="dropdown">
                                <li><a href="#" onclick="alert('产品定制页面正在开发中...')">产品定制</a></li>
                                <li><a href="#" onclick="alert('物流配送页面正在开发中...')">物流配送</a></li>
                            </ul>
                        </li>
                        <li class="nav-item"><a href="/products" class="nav-link">产品图集</a></li>
                        <li class="nav-item"><a href="/blog" class="nav-link">博客</a></li>
                        <li class="nav-item"><a href="/contact" class="nav-link">联系我们</a></li>
                    </ul>
                    
                    <div class="nav-right">
                        <!-- 语言切换器 -->
                        <user-language-switcher></user-language-switcher>
                        
                        <div class="search-box">
                            <input type="text" placeholder="搜索..." class="search-input">
                            <button class="search-btn"><i class="fas fa-search"></i></button>
                        </div>
                        
                        <div class="contact-info">
                            <span class="email"><i class="fas fa-envelope"></i> h3444850160@gmail.com</span>
                        </div>
                        
                        <!-- 用户认证区域 -->
                        <div class="auth-section">
                            <div class="auth-buttons" id="authButtons">
                                <a href="#" class="auth-link" onclick="showLoginModal()">登录</a>
                                <span class="separator">|</span>
                                <a href="#" class="auth-link" onclick="showRegisterModal()">注册</a>
                            </div>
                            <div class="user-info" id="userInfo" style="display: none;">
                                <span class="welcome">欢迎, <span id="userName"></span></span>
                                <button class="logout-btn" onclick="logout()">退出</button>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>
</template>

<script>
// 统一的顶部栏组件
class HeaderComponent extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.render();
        this.attachEventListeners();
        this.checkAuthStatus();
    }

    render() {
        const template = document.getElementById('header-template');
        const content = template.content.cloneNode(true);
        this.appendChild(content);
    }

    attachEventListeners() {
        // 搜索功能
        const searchInput = this.querySelector('.search-input');
        const searchBtn = this.querySelector('.search-btn');
        
        searchBtn.addEventListener('click', () => {
            this.performSearch(searchInput.value);
        });
        
        searchInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                this.performSearch(searchInput.value);
            }
        });
        
        // 导航菜单交互
        const navItems = this.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            item.addEventListener('mouseenter', () => {
                this.handleNavHover(item);
            });
            item.addEventListener('mouseleave', () => {
                this.handleNavLeave(item);
            });
        });
        
        // 移动端菜单切换
        this.setupMobileMenu();
    }

    performSearch(query) {
        if (query.trim()) {
            // 根据当前页面类型执行搜索
            const currentPath = window.location.pathname;
            if (currentPath.includes('/blog')) {
                // 博客搜索
                window.location.href = `/blog?search=${encodeURIComponent(query)}`;
            } else if (currentPath.includes('/products')) {
                // 产品搜索
                window.location.href = `/products?search=${encodeURIComponent(query)}`;
            } else {
                // 全局搜索
                window.location.href = `/search?q=${encodeURIComponent(query)}`;
            }
        }
    }

    handleNavHover(item) {
        const dropdown = item.querySelector('.dropdown');
        if (dropdown) {
            dropdown.style.display = 'block';
        }
    }

    handleNavLeave(item) {
        const dropdown = item.querySelector('.dropdown');
        if (dropdown) {
            dropdown.style.display = 'none';
        }
    }

    setupMobileMenu() {
        // 移动端菜单切换逻辑
        if (window.innerWidth <= 768) {
            const navContainer = this.querySelector('.nav-container');
            const navMenu = this.querySelector('.nav-menu');
            
            // 创建移动端菜单按钮
            const mobileMenuBtn = document.createElement('button');
            mobileMenuBtn.className = 'mobile-menu-btn';
            mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
            
            mobileMenuBtn.addEventListener('click', () => {
                navMenu.classList.toggle('mobile-open');
            });
            
            navContainer.appendChild(mobileMenuBtn);
        }
    }

    checkAuthStatus() {
        const userEmail = localStorage.getItem('userEmail');
        const userName = localStorage.getItem('userName');
        
        const authButtons = this.querySelector('#authButtons');
        const userInfo = this.querySelector('#userInfo');
        const userNameSpan = this.querySelector('#userName');
        
        if (userEmail && userName) {
            // 用户已登录
            authButtons.style.display = 'none';
            userInfo.style.display = 'flex';
            userNameSpan.textContent = userName;
        } else {
            // 用户未登录
            authButtons.style.display = 'flex';
            userInfo.style.display = 'none';
        }
    }

    // 更新导航激活状态
    updateActiveNav() {
        const currentPath = window.location.pathname;
        const navLinks = this.querySelectorAll('.nav-link');
        
        navLinks.forEach(link => {
            link.classList.remove('active');
            
            const href = link.getAttribute('href');
            if (href === currentPath || 
                (href !== '/' && currentPath.startsWith(href))) {
                link.classList.add('active');
            }
        });
    }
}

// 注册自定义元素
customElements.define('header-component', HeaderComponent);

// 全局认证函数
function showLoginModal() {
    alert('登录功能正在开发中...');
}

function showRegisterModal() {
    alert('注册功能正在开发中...');
}

function logout() {
    if (confirm('确定要退出登录吗？')) {
        localStorage.removeItem('userEmail');
        localStorage.removeItem('userName');
        localStorage.removeItem('rememberMe');
        window.location.reload();
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    const header = document.querySelector('header-component');
    if (header) {
        header.updateActiveNav();
    }
});
</script>

<style>
/* 统一的顶部栏样式 */
.header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

.logo img {
    height: 40px;
    width: auto;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.nav-item {
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-link:hover,
.nav-link.active {
    color: #007bff;
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 6px;
    padding: 10px 0;
    min-width: 150px;
    display: none;
    z-index: 1001;
}

.dropdown li {
    list-style: none;
}

.dropdown a {
    display: block;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    transition: background 0.3s;
}

.dropdown a:hover {
    background: #f8f9fa;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    width: 200px;
}

.search-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.search-btn:hover {
    background: #0056b3;
}

.contact-info {
    font-size: 14px;
    color: #666;
}

.email {
    display: flex;
    align-items: center;
    gap: 5px;
}

.auth-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-buttons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.auth-link {
    color: #007bff;
    text-decoration: none;
    font-size: 14px;
}

.auth-link:hover {
    text-decoration: underline;
}

.separator {
    color: #ddd;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.welcome {
    font-size: 14px;
    color: #333;
}

.logout-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.logout-btn:hover {
    background: #c82333;
}

/* 移动端样式 */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 15px;
        display: none;
    }
    
    .nav-menu.mobile-open {
        display: flex;
    }
    
    .nav-right {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }
    
    .search-input {
        width: 100%;
    }
    
    .mobile-menu-btn {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #333;
    }
}
</style>